<template>
	<view class="flex_c_c page">
		<!-- Tabbar页面 -->
		<view class="flex1 custom-tabbar-page" v-if="list['a'].is" :style="{display: onKey === 'a' ? '' : 'none'}">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<chat></chat>
			</scroll-view>
		</view>
		<view class="flex1 custom-tabbar-page" v-if="list['b'].is" :style="{display: onKey === 'b' ? '' : 'none'}">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<novel></novel>
			</scroll-view>
		</view>
		<view class="flex1 custom-tabbar-page" v-if="list['c'].is" :style="{display: onKey === 'c' ? '' : 'none'}">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<tool></tool>
			</scroll-view>
		</view>
		<view class="flex1 custom-tabbar-page" v-if="list['d'].is" :style="{display: onKey === 'd' ? '' : 'none'}">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<mine></mine>
			</scroll-view>
		</view>

		<view class="pan-tabbar">
			<!-- 液面 -->
			<view class="liquid-box">
				<view class="flex_c_c liquid" :style="{...liquidStyle}">
					<view class="liquid-str01" :class="{liquid_str01:animation01}">
						<image class="wh_100 image-"
							src=""
							mode="scaleToFill"></image>
					</view>
					<view class="flex1 liquid-str02"></view>
				</view>
			</view>
			<!-- 球 -->
			<view class="ball" :class="{ball_:animation02}" :style="{...ballStyle}">
			</view>
			<view class="flex_r fj_b pan-tabbar-list">
				<view class="pan-tabbar-item" :id="key" :class="{pan_tabbar_item:key === onKey}"
					v-for="(item,key) in list" :key='key' @click="onTabbar(item,key)">
					<view class="pan-tabbar-item-icon pan-tabbar-item-icon-off">
						<image class="wh_100" :src="item.iconOff" mode="aspectFill"></image>
					</view>
					<view class="pan-tabbar-item-icon pan-tabbar-item-icon-on">
						<image class="wh_100" :src="item.iconOn" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 底部安全区 -->
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	// 节流函数
	let timer;
	let flag;
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	export default {
		components: {},

		data() {
			return {
				animation01: false,
				animation02: false,
				ballStyleLeft: '',
				liquidStyleLeft: 0,
				onKey: '', // 初始不主动设置激活项，通过list默认值控制
				list: {
					a: {
						is: true, // 第一个页面默认显示
						title: '01',
						iconOff: "/static/tabbar/chat.png",
						iconOn: "/static/tabbar/chat1.png"
					},
					b: {
						is: false,
						title: '02',
						iconOff: "/static/tabbar/novel.png",
						iconOn: "/static/tabbar/novel1.png"
					},
					c: {
						is: false,
						title: '03',
						iconOff: "/static/tabbar/discover.png",
						iconOn: "/static/tabbar/discover.png"
					},
					d: {
						is: false,
						title: '04',
						iconOff: "/static/tabbar/mine.png",
						iconOn: "/static/tabbar/mine1.png",
					}
				}
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.getDemRefAll({
					selector: '.pan-tabbar-item',
					success: (e) => {
						this.init(e)
					}
				})
			})
		},
		computed: {
			ballStyle() {
				let style = {
					left: `${this.ballStyleLeft}px`
				}
				return style;
			},
			liquidStyle() {
				let style = {
					left: `${this.liquidStyleLeft}px`
				}
				return style;
			},

		},
		methods: {
			tabbarPageScrollLower() {},
			init(e) {
				e.forEach((item) => {
					item.left = item.left + 20; // 调整定位基准（根据实际布局可能需要微调）
					this.list[item.id]['style'] = item;
				})
				// 默认激活第一个标签（key为'a'）
				this.onKey = 'a'; 
				const item = this.list[this.onKey];
				this.onTabbar(item, this.onKey);
			},
			onTabbar(item, key) {
				this.throttle(() => {
					this.switchTabbarPage(key);
					this.onKey = key;
					let left = item.style.left;
					this.ballStyleLeft = left - 22;
					this.animation01 = true;
					this.animation02 = true;
					setTimeout(() => {
						this.liquidStyleLeft = left - (windowWidth / 2);
						this.animation01 = false;
					}, 300);
					setTimeout(() => {
						this.animation02 = false;
					}, 610);
				}, 610);
			},
			switchTabbarPage(key) {
				if (this.onKey === key) return;
				const selectPageFlag = this.list[key]['is'];
				if (selectPageFlag === undefined) return;
				if (selectPageFlag === false) {
					this.list[key]['is'] = true;
					// 隐藏其他页面（可选优化，避免多页面同时存在）
					Object.keys(this.list).forEach(k => {
						if (k !== key) this.list[k].is = false;
					});
				}
			},
			// 获取元素位置
			getDemRefAll(e) {
				const {
					selector,
					success = () => {}
				} = e;
				return new Promise((r) => {
					let view = uni.createSelectorQuery().selectAll(selector);
					view.boundingClientRect((ref) => {
						success(ref);
						r(ref);
					}).exec();
				});
			},
			// 节流函数
			throttle(func, wait = 500, immediate = true) {
				if (immediate) {
					if (!flag) {
						flag = true;
						typeof func === 'function' && func();
						timer = setTimeout(() => {
							flag = false;
						}, wait);
					}
				} else if (!flag) {
					flag = true;
					timer = setTimeout(() => {
						flag = false;
						typeof func === 'function' && func();
					}, wait);
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #f1f1f1;

		.custom-tabbar-page {
			width: 100%;
			height: auto; /* 重要：让内容区域自动撑高 */
			display: none; /* 默认隐藏，通过onKey控制显示 */
			&:first-child {
				display: block !important; /* 确保第一个页面初始显示 */
			}
		}
	}

	.pan-tabbar {
	  position: fixed; /* 改为固定定位 */
	  bottom: 0;
	  left: 0;
	  z-index: 100;
	  width: 100vw;
	  min-height: 100rpx;
	}

	.safe-area-inset-bottom {
		background-color: #fff;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
	}

	.liquid-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		width: 100vw;
		height: 100rpx;
		overflow: hidden;
	}

	.liquid {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;

		.liquid-str01 {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			transition: height .3s cubic-bezier(0.333, 1.01, 0.32, 1.275), width 0.3s cubic-bezier(0.133, 1.01, 0.32, 1.275);

			.image- {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
			}
		}

		.liquid-str01::after {
			position: absolute;
			left: -100vw;
			top: 0;
			content: '';
			width: 100vw;
			height: 100%;
			background-color: #fff;
		}

		.liquid-str01::before {
			position: absolute;
			right: -100vw;
			top: 0;
			content: '';
			width: 100vw;
			height: 100rpx;
			background-color: #fff;
		}

		.liquid_str01 {
			width: calc(100% + 100%);
			height: 0rpx;

		}

		.liquid-str02 {
			width: 100%;
			height: 0rpx;
			background-color: #ffffff;
		}

		.liquid-str02::after {
			position: absolute;
			left: -100vw;
			top: 0;
			content: '';
			width: 100vw;
			height: 100rpx;
			background-color: #fff;
		}

		.liquid-str02::before {
			position: absolute;
			right: -100vw;
			top: 0;
			content: '';
			width: 100vw;
			height: 100rpx;
			background-color: #fff;
		}

	}


	.ball {
		position: absolute;
		z-index: 3;
		top: -16px;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background-color: #ff763f;
		transition: all .6s;
	}

	.ball_ {
		animation: moveUpDownBall .6s ease-in-out;
	}





	.pan-tabbar-list {
		box-sizing: border-box;
		padding: 0 20px;
		position: relative;
		z-index: 3;
		width: 100%;
		height: 100rpx;


		.pan-tabbar-item {
			position: relative;
			width: 40px;
			height: 100%;

			.pan-tabbar-item-icon {
				position: absolute;
				top: 10px;
				left: 5px;
				width: 30px;
				height: 30px;
				transition: all .6s ease-in-out;
			}

			.pan-tabbar-item-icon-off {
				opacity: 1;
			}

			.pan-tabbar-item-icon-on {
				opacity: 0;
			}
		}

		.pan_tabbar_item {
			.pan-tabbar-item-icon {
				top: -10px;
			}

			.pan-tabbar-item-icon-off {
				opacity: 0;
			}

			.pan-tabbar-item-icon-on {
				opacity: 1;
			}
		}
	}


	/* 定义上下移动的动画 */
	@keyframes moveUpDownBall {
		0% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-60px);
		}

		80% {
			transform: translateY(6px);
		}

		100% {
			transform: translateY(0);

		}
	}

	// 以下是通用css
	.flex_r {
		display: flex;
		flex-direction: row;
	}

	.flex_c {
		display: flex;
		flex-direction: column;
	}

	.fj_b {
		justify-content: space-between;
	}

	.fj_a {
		justify-content: space-around;
	}

	.fj_c {
		justify-content: center;
	}

	.fa_c {
		align-items: center;
	}

	.flex_c_c {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.flex_r_c {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.flex1 {
		flex: 1;
	}

	.wh_100 {
		width: 100%;
		height: 100%;
	}

	.z_index2 {
		position: relative;
		z-index: 2;
	}

	.hover_class {
		position: relative;
		overflow: hidden;
	}

	.hover_class::after {
		position: absolute;
		z-index: 2;
		content: '';
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.rotate_45 {
		transform: rotate(45deg);
	}

	.rotate_90 {
		transform: rotate(90deg);
	}

	.rotate_180 {
		transform: rotate(180deg);
	}
</style>